﻿/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
* 
* http://extjs.com/license
*/
Ext.namespace('FantastPlatform', 'FantastPlatform.UI');
FantastPlatform.UI.PhotoField = Ext.extend(Ext.form.Field, {
    buttonText: '选择文件',
    cancelBtnText: '取消选择',
    uploadFileBtnText: '上传文件',
    buttonOnly: false,
    buttonOffset: 3,
    // private
    readOnly: true,
    autoSize: Ext.emptyFn,
    // private
    initComponent: function() {
    FantastPlatform.UI.PhotoField.superclass.initComponent.call(this);

        this.addEvents(
            'fileselected'
        );
    },
    setValue: function(v) {
    FantastPlatform.UI.PhotoField.superclass.setValue.call(this, v);
        if (v) {
            this.photoImg.dom.src =  v;
        }
    },

    // private
    onRender: function(ct, position) {
    FantastPlatform.UI.PhotoField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({ cls: 'x-form-field-wrap x-form-file-wrap' });
        this.el.addClass('x-form-file-text');
        //    this.
        //   this.el.dom.removeAttribute('name');

        this.headBox = this.wrap.createChild({
            height: 285,
            style: 'float:left;background-repeat:no-repeat; background-image: url(images/headBox2.gif);background-position:-6px 0px;width:286px',
            tag: 'div'
        });
        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });
        this.photoImg = this.headBox.createChild({
            // id: this.getFileInputId(),
            //  name: this.name || this.getId(),
            //       width: this.getSize().width,
            src: 'images/1.gif',
            style: 'margin-left:20px;margin-top:7px;width:240px;height:240px;margin-bottom:10px;',
            tag: 'img'
        });

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });

        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));
        this.cancelBtn = new Ext.Button({
            text: this.cancelBtnText,
            renderTo: this.wrap,
            cls: 'x-form-file-clBtn' + (this.clIconCls ? ' x-btn-icon' : '')
        });
        this.uploadFileBtn = new Ext.Button({
            text: this.uploadFileBtnText,
            renderTo: this.wrap,
            cls: 'x-form-file-ulBtn' + (this.clIconCls ? ' x-btn-icon' : '')
        }).hide();
        var tel = this;
        this.uploadFileBtn.on('click', function() {
            var myMask = new Ext.LoadMask(tel.headBox.dom, {
                removeMask: true,
                msg: "请稍候...."
            });
            tel.button.setDisabled(true);
            tel.cancelBtn.setDisabled(true);
            tel.uploadFileBtn.setDisabled(true);
            myMask.show();
            var id = Ext.id();
            var frame = document.createElement('iframe');
            frame.id = id;
            frame.className = 'x-hidden';
            frame.name = id;
            frame.onreadystatechange = function() {
                if (this.readyState == "complete") {
                    var body = document.frames[id].document.body;
                    if (body) {
                        if (body.innerText) {
                            var response = Ext.util.JSON.decode(body.innerText);
                            if (eval(response.success)) {
                                myMask.hide();
                                tel.setValue(response.message);
                                tel.button.enable();
                                tel.cancelBtn.enable();
                                //  form.removeChild();
                                tel.wrap.appendChild(tel.fileInput.dom);
                                tel.uploadFileBtn.enable();
                                tel.uploadFileBtn.hide();
                            } else {
                                myMask.hide();
                                showErrorMessage("操作失败", response.message);
                            }
                        }
                    }
                }
            }
            if (Ext.isIE) {
                frame.src = Ext.SSL_SECURE_URL;
            }
            document.body.appendChild(frame);

            if (Ext.isIE) {
                document.frames[id].name = id;
            };
            var form = document.createElement('form');
            form.className = 'x-hidden';
            form.target = id;
            form.appendChild(tel.fileInput.dom);
            form.method = 'POST';
            form.enctype = form.encoding = 'multipart/form-data';
            if (true) {
                form.action = '../Service/CaseCallBackService.aspx?Action=Upload';
            }
            document.body.appendChild(form);
            form.submit();

        });
        this.cancelBtn.on('click', function() {
            tel.uploadFileBtn.hide();
            tel.fileInput.dom.value = "";
            tel.setValue('');
            tel.photoImg.dom.src = 'images/1.gif';
        });

        if (true) {
            this.el.hide();
            this.wrap.setWidth(230);
        }

        this.fileInput.on('change', function() {
            this.uploadFileBtn.show();
            var v = this.fileInput.dom.value;
            //     this.setValue(v);
            var x = escape(v);
            this.photoImg.dom.src = "file://localhost/" + unescape(x.replace(new RegExp("%5C", "gm"), "/"));
            this.fireEvent('fileselected', this, v);
        }, this);
    },

    // private
    getFileInputId: function() {
        return this.id + '-file';
    },

    // private
    onResize: function(w, h) {
    FantastPlatform.UI.PhotoField.superclass.onResize.call(this, w, h);
        this.wrap.setWidth(350);

        if (!this.buttonOnly) {
            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },

    // private
    preFocus: Ext.emptyFn,

    // private
    getResizeEl: function() {
        return this.wrap;
    },

    // private
    getPositionEl: function() {
        return this.wrap;
    },

    // private
    alignErrorIcon: function() {
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }

});